<template>
  <div class="pInfoCard-container">
    <xm-card-header
      title="病史信息"
      btnText="编辑"
      @btnClick="edit"
      btnType="primary"
    ></xm-card-header>
    <el-form>
      <el-form-item label="既往史">
        <span class="textClass">
          {{ pageData.form.past ? pageData.form.past : '暂未填写' }}
        </span>
      </el-form-item>
      <el-form-item label="过敏史">
        <span class="textClass">
          {{ pageData.form.allergy ? pageData.form.allergy : '暂未填写' }}
        </span>
      </el-form-item>
      <el-form-item label="个人史">
        <span class="textClass">
          {{ pageData.form.personal ? pageData.form.personal : '暂未填写' }}
        </span>
      </el-form-item>
      <el-form-item label="家族史">
        <span class="textClass">
          {{ pageData.form.family ? pageData.form.family : '暂未填写' }}
        </span>
      </el-form-item>
    </el-form>
    <el-dialog
      title="病史信息"
      v-model="isVisble"
      :close-on-click-modal="false"
    >
      <el-form>
        <xm-f-intput
          v-model="pageData.dialogForm.past"
          type="textarea"
          label="既往史："
        ></xm-f-intput>
        <xm-f-intput
          v-model="pageData.dialogForm.allergy"
          type="textarea"
          label="过敏史："
        ></xm-f-intput>
        <xm-f-intput
          v-model="pageData.dialogForm.personal"
          type="textarea"
          label="个人史："
        ></xm-f-intput>
        <xm-f-intput
          v-model="pageData.dialogForm.family"
          type="textarea"
          label="家族史："
        ></xm-f-intput>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isVisble = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import XmCardHeader from 'XMC/XmCardHeader'
  import { XmFIntput } from 'XMC'
  import { reactive, ref } from '@vue/reactivity'
  import { medicalHistoryInfo, save } from '@/api/modules/medicalHistory'
  import { onBeforeMount } from '@vue/runtime-core'
  import { cloneDeep } from 'lodash-es'
  import { ElLoading } from 'element-plus'
  export default {
    name: 'medicalHistoryInfo',
    components: { XmCardHeader, XmFIntput },
    props: { id: Number },
    setup(props) {
      let isVisble = ref(false)
      const pageData = reactive({
        dialogForm: {},
        form: { family: null, allergy: null, past: null, personal: null },
      })
      const edit = function () {
        console.log('edit')
        isVisble.value = true
        pageData.dialogForm = cloneDeep(pageData.form)
      }
      const loadData = async function (patientId) {
        const res = await medicalHistoryInfo({ patientId })
        if (res.data === null) {
          pageData.form = { past: '', allergy: '', personal: '', family: '' }
        } else {
          pageData.form = res.data
        }
      }

      const toSave = async function (form, patientId) {
        const loading = ElLoading.service()
        await save({ ...form, patientId })
        loading.close()
        isVisble.value = false
        loadData(props.id)
      }

      const onSubmit = function () {
        toSave(pageData.dialogForm, props.id)
      }
      onBeforeMount(async () => {
        await loadData(props.id)
      })
      return {
        isVisble,
        edit,
        loadData,
        toSave,
        onSubmit,
        pageData,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .pInfoCard-container {
    background-color: white;
    margin-top: 32px;
    padding: 15px;
    @include card-shadow;
    :deep(.el-form-item) {
      margin-bottom: 11px;
      span {
        color: #606266;
      }
    }
    :deep(.el-dialog) {
      border-radius: 5px;
    }
  }
</style>
